I am sending a postmessage from js script to iframe which is in react

// listensting to postMessage() function in react // React File

useEffect(() => {

function getData(e) {
  console.log("inside function");
  var origin = e.origin || e.originalEvent.origin;
  console.log("origin", origin);

  if (typeof e.data == "object" && "shopDomain" in e.data) {
    console.log(e.data);
  } else {
    console.log("not able to catch data");
  }
}
window.addEventListener("message", getData, false);
return () => {
  window.removeEventListener("message", getData, false);
};
}, []);

// JS File

let win = iframe.contentWindow;
win.contentWindow.postMessage(
  {
    customerId: customerId_rs,
    parentLocation: window.location.host,
  },
  "*"
);

Looked at various sites but can't find any solution. Have spent almost 10 hours at this any help would be appreciated.